<template>
    <div class="image-container">
        <el-card class="box-card">
            <div slot="header">
                <!-- 导航 -->
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>素材管理</el-breadcrumb-item>
                </el-breadcrumb>
                <!-- 导航 -->
            </div>
            <!-- 素材内容 -->
            <div class="image-btn">
                <el-radio-group v-model="condition" size="mini">
                    <el-radio-button label="全部"></el-radio-button>
                    <el-radio-button label="收藏"></el-radio-button>
                </el-radio-group>
                <el-button size="mini" type="success" @click="dialogUploadVisible = true">上传素材</el-button>
            </div>

            <el-row :gutter="20">
                <el-col :xs="12" :sm="6" :md="6" :lg="4" class="image-item" v-for="count in 100">
                    <el-image style="height: 100px" fit="cover" :src="url" :preview-src-list="preSrcList"></el-image>
                    <div class="image-action" >
                        <el-button type="warning" icon="el-icon-star-off" size="mini" circle></el-button>
                        <el-button type="danger" icon="el-icon-delete" size="mini" circle></el-button>
                    </div>
                </el-col>
            </el-row>
            <!-- 素材内容 -->
        </el-card>

        <el-dialog
            title="上传素材"
            :append-to-body="true"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :visible.sync="dialogUploadVisible">
            <!--
            action: 上传文件url
            name: 后台接受参数名称
            -->
            <el-upload
                class="upload-demo"
                drag
                action="https://jsonplaceholder.typicode.com/posts/"
                name="images"
                multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "ImageIndex",
        data() {
            return {
                condition: '全部',
                dialogUploadVisible: false,     // 弹出框可见性
                url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                preSrcList: [
                    'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
                ]
            }
        }
    }
</script>

<style scoped>
    .image-btn{
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
    }
    .upload-demo{
        text-align: center;
    }
    .image-action{
        height: 30px;
        background-color: rgba(204, 204, 204, .5);
        position: absolute;
        bottom: 4px;
        left: 10px;
        right: 10px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
    .image-action button{
        cursor: pointer;
    }
    .image-item{
        cursor: pointer;
        position: relative;
    }
</style>
